<!-- 新闻管理 -->
<template>
  <div class="management">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>后勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <div class="managementContent">
      <ul>
        <li
          v-for="item in manage"
          :key="item.id"
          @click="clic(item.id)"
          :class="item.id == clicids ? 'cor' : ''"
        >
          {{ item.content }}
        </li>
      </ul>
      <!-- 最新新闻 -->
      <div v-show="clicids == 0" class="managementContentOne">
        <!-- <p>最新新闻</p> -->
        <div class="managementContentOne_Head">
          <table>
            <tr>
              <th>新闻标题</th>
              <th>新闻内容</th>
              <th>新闻时间</th>
              <th>发布者</th>
              <th>新闻简介</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in managemen" :key="item.NewsId">
              <td>{{ item.NewsTitle }}</td>
              <td>{{ item.NewsContent }}</td>
              <td>{{ item.NewsTime }}</td>
              <td>{{ item.NewsAuthor }}</td>
              <td>{{ item.NewsTitle }}</td>
              <td @click="fnts(item.NewsId)" :style="{ color: '#f00' }">
                删除
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 新建新闻 -->
      <div v-show="clicids == 1" class="managementContentTwo">
        <div class="managementContentTwo_left">
          <p>新建新闻</p>
          <div class="managementContentTwo_left_left">
            <el-form ref="form" label-width="80px" size="mini">
              <el-form-item label="新闻标题">
                <el-input placeholder="请输入" v-model="input1"></el-input>
              </el-form-item>

              <el-form-item label="发布者">
                <el-input placeholder="请输入" v-model="input2"></el-input>
              </el-form-item>

              <el-form-item label="新闻时间">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="value1"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>

              <el-form-item label="新闻简介">
                <el-input placeholder="请输入" v-model="input4"></el-input>
              </el-form-item>
              <el-form-item label="新闻内容">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="textarea"
                ></el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="managementContentTwo_right">
          <div class="managementContentTwo_right_One">
            <div class="block">
              <div class="radio">
                <el-radio-group v-model="reverse">
                  <el-radio :label="true">倒序</el-radio>
                  <el-radio :label="false">正序</el-radio>
                </el-radio-group>
              </div>
              <div class="managementContentTwo_right_OneA">
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    :style="{ fontSize: '12px' }"
                    v-for="(activity, index) in managemen"
                    :key="index"
                    :timestamp="activity.NewsTime"
                  >
                    <h3>发布成功</h3>
                    {{ activity.NewsAuthor }} {{ activity.NewsTitle }}
                    {{ activity.NewsContent }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  data() {
    return {
      input1: "", //新闻标题的双向绑定数据
      input2: "", //发布者的双向绑定数据
      value1: "", //发布时间的双向数据绑定
      input4: "", //新闻简介的双向数据绑定
      textarea: "", //新闻内容的双向绑定数据
      clicids: 0, //控制新闻和创建新闻显示
      reverse: true,
      manage: [
        { id: 0, content: "最新新闻" },
        { id: 1, content: "新建新闻" },
      ],
      managemen: [],
    };
  },
  methods: {
    //控制待审核和审批状况的节流阀
    clic(id) {
      this.clicids = id;
      //  console.log(this.clicid);
      //  console.log(this.input1,this.input2,this.value);
    },
    //获取新闻
    SelectMana() {
      this.$axios({
        url: "http://localhost:9090/selectMana",
        methods: "get", //get请求方式
      }).then((res) => {
        this.managemen = res.data.data;
        // console.log(res.data.data);
      });
    },
    //删除新闻
    fnts(id) {
      this.$axios({
        url: "http://localhost:9090/deleteMana",
        method: "post",
        data: Qs.stringify({ NewsId: id }),
      }).then((res) => {
        // console.log(res);
      });
      this.SelectMana();
    },
    //创建新闻
    onSubmit() {
      let time=new Date( this.value1).toLocaleString()
      // console.log(this.input1);
      let obj = {
        NewsTitle: this.input1,
        NewsContent: this.textarea,
        NewsTime: time,
        NewsAuthor: this.input2,
        NewsPic: "",
        LittleContent: this.input4,
      };
      if (
        this.input1 != "" &&
        this.textarea != "" &&
        this.value1 != "" &&
        this.input2 != "" &&
        this.input4 != ""
      ) {
        this.$axios({
          url: "http://localhost:9090/insertmana",
          method: "post",
          data: Qs.stringify(obj),
        }).then((res) => {
           this.input1 = "" 
        this.textarea = "" 
        this.value1 = "" 
        this.input2 = "" 
        this.input4 = ""
        });
        this.SelectMana();
      }
    },
  },

  //生命周期挂载后
  mounted() {
    this.SelectMana();
  },
};
</script>

<style >
.management {
  width: 100%;
  height: 100%;
  background: #fff;
  padding-top: 20px;
  padding-left: 10px;
  /* border: 1px solid #f00; */
}

/* 内容 */
.managementContent > ul {
  width: 100%;
  height: 90%;
  overflow: hidden;
  text-align: left;
}
.managementContent > ul > li {
  width: 10%;
  height: 34px;
  list-style: none;
  margin: 10px 10px;
  border-radius: 7px;
  line-height: 34px;
  text-align: center;
  background: rgb(253, 246, 236);
  float: left;
  /* border: 1px solid #f00; */
}
.managementContent > ul > li:hover {
  background: rgb(230, 162, 60);
  color: #fff;
}

.managementContentOne {
  width: 100%;
  height: 90%;
  /* border: 1px solid #0f0; */
  position: relative;
}
.managementContentOne_Head {
  width: 100%;
  height: 200px;
  /* border: 1px solid #f00; */
}
.managementContentOne_Head > table {
  width: 100%;
  margin: 20px 0 0 0;
  /* border: 1px solid #f00; */
}
.managementContentOne_Head > table > tr {
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}
.managementContentOne_Head > table > tr:hover {
  background: rgb(218, 210, 210);
}
/* 新建新闻 */
.managementContentTwo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 左边 */
.managementContentTwo_left {
  width: 60%;
  height: 100%;
  float: left;
  /* background: #f00; */
}
.managementContentTwo_left > p {
  height: 28px;
  line-height: 28px;
  margin: 20px 0 0 0;
  /* background:rgb(222, 227, 229); */
  /* border: 1px solid #f00;  */
}
.managementContentTwo_left > ul {
  width: 70%;
  height: 100%;
  margin: auto;
  /* border: 1px solid #f00; */
  list-style: none;
  overflow: hidden;
}
.managementContentTwo_left > ul > li {
  height: 55px;
  line-height: 55px;
  font-size: 15px;
  /* border: 1px solid #f00; */
  float: left;
}
.managementContentTwo_left_left {
  width: 60%;
  margin: 20px auto 0;
}
/* .managementContentTwo_left_right{
         width: 45%;
        text-align: left;
      } */
.cj {
  width: 100%;
}
.cj > button {
  width: 15%;
  height: 40px;
  margin: 20px 0 0 0;
  border-radius: 15px;
  background: rgb(253, 246, 236);
  border: none;
  outline: none;
}
.cj > button:hover {
  background: rgb(230, 162, 60);
}
/* 右边 */
.managementContentTwo_right {
  width: 39%;
  overflow-x: hidden;
  overflow-y: scroll;
  /* background: #f00; */
  text-align: left;
  float: left;
}
.radio {
  margin: 20px 0 20px 0;
}
.managementContentTwo_right_OneA {
  width: 100%;
  height: 300px;
  padding: 10px 0 0 10px;
  overflow-x: hidden;
  overflow-y: scroll;
  border-radius: 10px;
  background: rgb(245, 245, 243);
}
.managementContentTwo_right::-webkit-scrollbar {
  display: none;
}
</style>